
var urlList = {
	"status": 200
}
var myFooter = {
	template: `
		<footer class="footer">
			<div class="footer-main">
				<p>
					<a href="http://123.d163.net/pages/about.html">关于本站</a>
					<a title="免责声明" href="http://123.d163.net/pages/terms.html">免责声明</a>
					<a title="隐私保护" href="http://123.d163.net/pages/yinsi.html">隐私保护</a>
					<a title="帮助中心" href="http://123.d163.net/pages/help.html">帮助中心</a>
					<a title="广告合作" href="http://123.d163.net/pages/adfuwu.html">广告合作</a>
					<a href="http://www.d163.net/">联系站长</a>
				</p>
				<p>Copyright © 2015-2020 小郭(AndyGuo)</p>
			</div>
		</footer>
	`,
}
var myHeader = {
	template: `
		<header class="header">
			<div class="h-l"><iframe id="tianqi"  scrolling="no" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=34&icon=1&num=3"></iframe></div>
			<div class="h-c"><div class="time" v-html="nowTime"></div></div>
			<div class="h-r"><a @click="login" href="javascript:;">登录</a><a @click="login" href="javascript:;">注册</a></div>
		</header>
	`,
	data: function () {
		return {
			nowTime:""
		}
	},
	methods: {
		timeFormate: function(){
			let now = new Date();
			let year = now.getFullYear();
			let month =now.getMonth() + 1 < 10? "0" + (now.getMonth() + 1): now.getMonth() + 1;
			let date =now.getDate() < 10? "0" + now.getDate(): now.getDate();
			let hh =now.getHours() < 10? "0" + now.getHours(): now.getHours();
			let mm =now.getMinutes() < 10? "0" + now.getMinutes(): now.getMinutes();
			let ss =now.getSeconds() < 10? "0" + now.getSeconds(): now.getSeconds();
			let weekDay = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			let _week = weekDay[now.getDay()];
			this.nowTime = `<span>${year}年${month}月${date}日</span><span>${hh}:${mm}:${ss}</span><span>${_week}</span> `;
			// console.log(this.nowTime);
		},
		
		login: function(){
			alert("暂未开放！");
		}
	},
	mounted: function () {
		this.timeFormate();
		this.timeId = setInterval(this.timeFormate,1000);
	},
	beforeDestroy:function(){
		//实例销毁前清除定时器
		if(this.timeId){
			clearInterval(this.timeId);
		}
	}
}

var searchMode = {
	template: `
		<div id="search">
		    <form :action="url" target="_blank" method="get" accept-charset="utf-8" _lpchecked="1">
		    <a id="search-l" :href="url" target="_blank"><img :src="logo" height="70"></a>
		        <div id="search-c">
		            <div id="kwh" style="display: none;"></div>
		            <div class="s-tab" id="s-tl">
			            <a href="javascript:;" 
							v-for="(v,index) in soList"
							:key="v.id" 
							:class="{cur:index==num}" 
							:id="'so'+v.id" 
							@click.stop="changeUrl(v.id,v.url,v.logo,v.so_name,index)"
		            	>{{v.name}}
		            	</a>
		            </div>
		            <div class="search-box">
						<input type="text" id="keyword" :name="so_name" autocomplete="off" 
						v-model="text"
						
						@keyup="getData($event)"
						@keydown.down.prevent="selectDown()"
					    @keydown.up.prevent="selectUp()"
					    >
						<input type="submit" value="搜 索" id="s-btn">
		            </div>
		            <ul v-show="isshow_baidutext" class="baidu_su_text">
		                <li v-for="(value,index) in myData" :class="{'bg-primary':index==now}" @click.stop="toSearch(value)">
		                <span class="" :class="{'text-white':index==now}">{{value}}</span></li>
		            </ul>
		            <p class="s-ipt" id="sps" style="display:none"></p>
		        </div>
		        <div v-if="isShow" id="search_hidden">
		        <input type="hidden" name="tn" value="baiduimage">
		        <input type="hidden" name="ipn" value="r">
		        <input type="hidden" name="ct" value="201326592">
		        <input type="hidden" name="cl" value="2">
		        <input type="hidden" name="lm" value="-1">
		        <input type="hidden" name="st" value="-1">
		        <input type="hidden" name="fm" value="index">
		        <input type="hidden" name="fr" value="">
		        <input type="hidden" name="hs" value="2">
		        <input type="hidden" name="xthttps" value="11111">
		        <input type="hidden" name="sf" value="1">
		        <input type="hidden" name="fmq" value="">
		        <input type="hidden" name="pv" value="">
		        <input type="hidden" name="ic" value="0">
		        <input type="hidden" name="nc" value="1">
		        <input type="hidden" name="z" value="">
		        <input type="hidden" name="se" value="1">
		        <input type="hidden" name="showtab" value="0">
		        <input type="hidden" name="fb" value="0">
		        <input type="hidden" name="width" value="">
		        <input type="hidden" name="height" value="">
		        <input type="hidden" name="face" value="0">
		        <input type="hidden" name="istype" value="2">
		        <input type="hidden" name="ie" value="utf-8">
		        <input type="hidden" name="word" v-model="text">
		        </div>
		    </form>
		</div>
	`,
	data: function () {
		return {
			url:"http://www.baidu.com/s?wd=",
			logo: "//andy168.gitee.io/images/baidu_logo.jpg",
			so_name:"wd",
			isShow: false,
			num: 0,
			text:"",
			now:-1,
			myData:[],
			menu:"menu",
			isshow_baidutext:false,
			soList: [
				{
					"id":"0",
					"name": "百度",
					"url": "http://www.baidu.com/s?wd=",
					"logo": "//andy168.gitee.io/images/baidu_logo.jpg",
					"so_name": "wd"
				},
				{
					"id":"1",
					"name": "360搜索",
					"url": "http://www.so.com/s?q=",
					"logo": "https://ae01.alicdn.com/kf/Hb98d5725e2254e3f9a0d76c44a7a0f50w.png",
					"so_name": "q"
				},
				{
					"id":"2",
					"name": "必应",
					"url": "http://cn.bing.com/search?q=",
					"logo": "https://ae01.alicdn.com/kf/H9ada9c827fb2476184cbc619eba924adY.png",
					"so_name": "q"
				},
				{
					"id":"3",
					"name": "谷歌",
					"url": "http://google.uwp.ac.cn/search?hl=zh-CN&q=",
					"logo": "https://ae01.alicdn.com/kf/He8c411883019416fa04023d46735faddK.png",
					"so_name": "q"
				},
				{
					"id":"4",
					"name": "音乐",
					"url": "http://music.baidu.com/search?key=",
					"logo": "https://ae01.alicdn.com/kf/H08ca806cce0e4044b5946ef70c10f66fG.png",
					"so_name": "key"
				},
				{
					"id":"5",
					"name": "图片",
					"url": "https://image.baidu.com/search/index",
					"logo": "https://ae01.alicdn.com/kf/Hf27a219321df4bb8944f4c870e5ed6ad4.png",
					"so_name": "word"
				},
				{
					"id":"6",
					"name": "地图",
					"url": "http://map.baidu.com/m",
					"logo": "https://ae01.alicdn.com/kf/H781dc81b82654a81abee2e4b85c4d7788.png",
					"so_name": "word"
				},
				{
					"id":"7",
					"name": "淘宝",
					"url": "http://s.taobao.com/search",
					"logo": "https://ae01.alicdn.com/kf/H28f04e6d86334ffc9d9714cfdbf0ad5fL.png",
					"so_name": "q"
				}

			]
		}
	},
	methods: {
		changeUrl: function (id,Url,logo,soName,index) {
			let that = this;
			that.url = Url;
			that.logo = logo;
			that.so_name = soName;
			that.num = index;
			if(id==5){
				that.isShow = true;
			}else{
				that.isShow = false;
			}
			if(Url.indexOf("www.baidu.com") == -1){
				this.isshow_baidutext = false;
			}
		},
		getData:function (event) {
			_self = this;
		    if(event.keyCode==38||event.keyCode==40)return;
		    if(this.url.indexOf("www.baidu.com") == -1){
		    	return;
		    }
		    /*
		    if(event.keyCode==13){
		        window.open('https://www.baidu.com/s?wd='+this.keyword);
		        this.keyword=''
		    }*/
		    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
		    	params: {
                    wd: this.text
                },
		        jsonp:'cb'
		    }).then(function (res) {
		        this.myData=res.data.s;
		    },function () {

		    });
		    this.isshow_baidutext = true;
		    setTimeout(function(){
	            //展开菜单的时候添加到document的click事件
	              document.addEventListener("click",_self.removeEvt);
            },10)
			
		},
		removeEvt:function(){
			document.removeEventListener("click",()=>{});
	        this.isshow_baidutext = false;
		},
		toSearch: function(v_text){
			let url = "https://www.baidu.com/s?wd="+v_text;
			window.open(url);
		},
		selectDown:function () {
		    this.now++;
		    if(this.now==this.myData.length)this.now=-1;
		    this.text=this.myData[this.now];
		},
		selectUp:function () {
		    this.now--;
		    if(this.now==-2)this.now=this.myData.length-1;
		    this.text=this.myData[this.now];
		}
	},
	computed:{

	},
	mounted: function(){
		
		if(this.myData.length>0 && this.url.indexOf("www.baidu.com") != -1){
			this.isshow_baidutext = true;
		} else{ this.isshow_baidutext = false; }
	}
}
var myListA = {
	template: `
		<div class="list-wrap">
			<ul>
				<li v-for="item in owlist"><a class="text-truncate" :title="item.name" :href="item.url" target="_blank"><i class="fa" :class="rnd_fa()"></i> {{item.name}}</a></li>
			</ul>
			<h3 class="t-title">常用工具</h3>
			<ul>
				<li v-for="tool in tools" :key="tool.id"><a class="text-truncate" :title="tool.name" :href="tool.url" target="_blank"><i class="fa" :class="rnd_fa()"></i> {{tool.name}}</a></li>
			</ul>
			<h3 class="t-title">名站导航</h3>
			<div class="m-site">
				<ul v-for="v1 in mingsites">
					<li><a :href="v1.url" target="_blank">{{v1.fenleititle}}</a></li>
					<li v-for="v2 in v1.fenleilist"><a target="_blank" :href="v2.url">{{v2.title}}</a></li>
					<li><a :href="v1.url" target="_blank">更多>></a></li>
				</ul>
				
			</div>
		</div>
	`,
	data: function () {
		return {
			"owlist":[],
			"tools":[],
			"mingsites":[],
			fa_icons:["fa-internet-explorer","fa-share-alt","fa-apple","fa-chrome","fa-edge"]

		}
	},
	methods:{
		rnd_fa: function () {
			var _index = Math.floor((Math.random()*(this.fa_icons.length))); 
			return this.fa_icons[_index];
		},
		getOlist: function(){
		    this.$http.jsonp('//andy168.gitee.io/api/data/jsonp.js',{jsonpCallback:"getData"}).
		    then(function (res) {
		    	console.log(res);
		    	this.owlist = res.data.s;
		    	this.tools = res.data.tools;
		    	this.mingsites = res.data.mingsites;
		        
		    },function () {
		    	console.log("fair");

		    });

		}
	},
	created: function(){
		this.getOlist()
	}
}

var myListB = {
	template: `
		<div class="mylist_b">
			<a v-for="item in owlist" :title="item.name" :href="item.url" target="_blank">
			<img :src="'//andy168.gitee.io/andyimg/web_logo/'+item.logo" :alt="item.name" />
			</a>
		</div>
	`,
	data: function () {
		return {
			"owlist":[
				{
					"id":"17",
					"name": "小郭博客",
					"url": "http://www.d163.net/",
					"logo": "xzmbw.png"
				},
				{
					"id":"16",
					"name": "小子模板网",
					"url": "http://xz0377.cn/",
					"logo": "xzmbw.png"
				},
				{
					"id":"15",
					"name": "爱少目录",
					"url": "http://www.ishaofu.cn/",
					"logo": "ishaofu.png"
				},
				{
					"id":"14",
					"name": "吉林省虹海网络",
					"url": "http://www.jlwebs.cn/",
					"logo": "honghai.png"
				},
				{
					"id":"13",
					"name": "舒彬琪博客",
					"url": "http://www.cnsbq.com/",
					"logo": "sbq.png"
				},
				{
					"id":"12",
					"name": "微博",
					"url": "http://www.weibo.com/",
					"logo": "12.png"
				},
				{
					"id":"11",
					"name": "光明网",
					"url": "http://www.gmw.cn/",
					"logo": "11.png"
				},
				{
					"id":"10",
					"name": "网易",
					"url": "http://www.163.com/",
					"logo": "10.png"
				},
				{
					"id":"9",
					"name": "搜狐",
					"url": "http://www.sohu.com/",
					"logo": "9.png"
				},
				{
					"id":"8",
					"name": "新浪",
					"url": "http://www.sina.com.cn/",
					"logo": "8.png"
				},
				{
					"id":"7",
					"name": "58同城",
					"url": "http://www.58.com/",
					"logo": "7.png"
				},
				{
					"id":"6",
					"name": "苏宁易购",
					"url": "http://www.jd.com/",
					"logo": "6.png"
				},
				{
					"id":"5",
					"name": "1号店",
					"url": "http://www.yhd.com/",
					"logo": "5.png"
				},
				
				{
					"id":"4",
					"name": "苏宁易购",
					"url": "https://www.suning.com/",
					"logo": "4.png"
				},
				{
					"id":"3",
					"name": "唯品会",
					"url": "http://www.vip.com/",
					"logo": "3.png"
				},
				{
					"id":"2",
					"name": "当当网",
					"url": "http://www.dangdang.com/",
					"logo": "2.png"
				},
				{
					"id":"1",
					"name": "淘宝网",
					"url": "http://www.taobao.com",
					"logo": "1.png"
				}
			]

		}
	}
	
}
var myNav = {
	template: `
	<div class="mynav">
		<div class="tabs"><a href="javascript:;" :class="{active:index == num}" @click="tab(index)" v-for="(v,index) in tabs_title" :key="v.id"><i class="fa" :class="v.faclass"></i> {{v.title}}</a></div>
		<component :is="componentName"></component>
	</div>
	`,
	components: {
		"mylista":myListA,
		"mylistb":myListB
	},
	data: function () {
		return {
			num:0,
			tabs_title:[
				{"id":"1","faclass":"fa-user","title":"我的导航"},
				{"id":"2","faclass":"fa-tag","title":"推荐网站"}
			],
			componentName:'mylista'
		}
	},
	methods:{
		tab: function (num) {
			this.num = num;
			if(num==0){
				this.componentName = "mylista";
			} else if(num==1){
				this.componentName = "mylistb";
			}
		}
		
	},
	computed: {
		
	}

}
var vm = new Vue({
	el: "#app",
	data: urlList,
	components: {
		"my-nav": myNav,
		"search-mode": searchMode,
		"my-header":myHeader,
		"my-footer":myFooter
	},
	created: function () {
		//
	},
	methods:{

	},
	mounted:function(){
		console.log("mounted is Ok");
	}
})
